<template>
  <div class="app-container">
    <div class="vip-info">
      <div class="tab-list flex-a">
        <div :class="tab == item.value ? 'active item' : 'item'" v-for="item in tabList" :key="item.value"
          @click="changeTab(item.value)">
          <span>{{ item.name }}</span>
          <i></i>
        </div>
      </div>
      <!-- 订单管理 -->
      <div class="box" v-if="tab == 'order'">
        <div class="type-list flex-a">
          <div :class="item.value === status ? 'active item' : 'item'" v-for="item in typeList" :key="item.id"
            @click="changeType(item.value)"><el-badge :value="item.num">
              {{ item.label }}
            </el-badge></div>
        </div>
        <div class="flex-b">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="input">
            <el-form-item>
              <el-select v-model="queryParams.type" placeholder="请选择">
                <el-option v-for="item in timeTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="queryParams.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange"
                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryParams.vipName" prefix-icon="el-icon-search" style="width:340px"
                placeholder="请输入用户姓名/电话" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item>
              <el-select v-model="queryParams.limit" placeholder="是否逾期">
                <el-option v-for="item in limitList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button plain size="medium" @click="toStoreNow">今日到店</el-button>
              <el-button plain size="medium" @click="toLeaveNow">今日离店</el-button>
              <el-button type="primary" class="btn" size="mini" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-bottom: 10px;">
          <el-button type="primary" class="btn" size="mini" @click="addFoster">新增寄养</el-button>
          <!-- <el-button type="primary" class="btn" size="mini">寄养加价</el-button>
          <el-button type="primary" class="btn" size="mini">寄养协议</el-button> -->
        </div>
        <div>
          <el-table v-loading="loading" :data="orderData">
            <el-table-column label="姓名" align="center" prop="vipName" width="200">
              <template slot-scope="scope">
                <span style="color: #409EFF;cursor: pointer;" @click="showPetDialog(scope.row.no)">{{ scope.row.vipName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="电话" align="center" prop="vipPhone" width="200" />
            <el-table-column label="收银员" align="center" prop="cashier" width="200" />
            <el-table-column label="单日放假" align="center" prop="price" width="200" />
            <el-table-column label="入住时间" sortable align="center" prop="beginDate" width="200" />
            <el-table-column label="离店时间" sortable align="center" prop="endDate" width="200" />
            <el-table-column label="创建时间" sortable align="center" prop="integral" width="200" />
            <el-table-column label="状态" align="center" prop="status" width="200">
              <template slot-scope="scope">
                {{
                  scope.row.status == 0 ? '待到店' : scope.row.status == 1 ? '寄养中' : scope.row.status == 2 ? '待结账' :
                    scope.row.status == 3 ? '已完成' : scope.row.status == 4 ? '已取消' : ''
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="250">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status == 0"
                  style="margin-right: 5px;background: #FAC202;border-color: #FAC202;width: 70px;" size="mini"
                  type="warning" @click="toStore(scope.row)">到店</el-button>
                <el-button v-if="scope.row.status == 1"
                  style="margin-right: 5px;background: #FAC202;border-color: #FAC202;width: 70px;" size="mini"
                  type="warning" @click="stopFoster(scope.row)">结束寄养</el-button>
                <el-button v-if="scope.row.status == 2"
                  style="margin-right: 5px;background: #FAC202;border-color: #FAC202;width: 70px;" size="mini"
                  type="warning" @click="toPay(scope.row)">去结账</el-button>
                <el-dropdown split-button type="primary" size="mini" placement="bottom">
                  更多
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="append(scope.row)">追加预存款</span></el-dropdown-item>
                    <el-dropdown-item><span @click="back(scope.row)">退还预存款</span></el-dropdown-item>
                    <el-dropdown-item><span @click="eidtFoster(scope.row)">修改</span></el-dropdown-item>
                    <el-dropdown-item><span @click="resetpet(scope.row)">取消</span></el-dropdown-item>
                    <el-dropdown-item><span @click="handleDelete(scope.row)">删除</span></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
          </div>
        </div>
      </div>
      <!-- 寄养配置 -->
      <!-- <div class="box" v-if="tab=='setting'">
        <setting></setting>
      </div> -->
    </div>
    <!-- 追加预存款弹窗 -->
    <el-dialog title="追加预存" :visible.sync="appendMoney" width="600px" append-to-body class="center">
      <el-form ref="form" :model="appendForm" :rules="rules" label-width="120px" class="input">
        <el-form-item label="预存金额" prop="prePrice">
          <el-input v-model="appendForm.prePrice" @input="inputPrice" placeholder="请输入预存金额" />
        </el-form-item>
        <el-form-item label="支付方式" prop="phone">
          <el-select v-model="appendForm.type" placeholder="请选择" style="width:100%">
            <el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售员" prop="cashier">
          <el-select v-model="appendForm.cashier" placeholder="请选择" style="width:100%">
            <el-option v-for="item in cashierList" :label="item.staffName" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="打印小票" prop="phone">
          <el-radio v-model="appendForm.sex" label="1">是</el-radio>
          <el-radio v-model="appendForm.sex" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="发送短信" prop="phone">
          <el-radio v-model="appendForm.sex" label="1">是</el-radio>
          <el-radio v-model="appendForm.sex" label="2">否</el-radio>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitAppend">提交</el-button>
      </div>
    </el-dialog>
    <!-- 退还预存款弹窗 -->
    <el-dialog title="退还预存款" :visible.sync="backMoney" width="600px" append-to-body class="center">
      <el-form ref="form" :model="appendForm" :rules="rules" label-width="120px" class="input">
        <el-form-item label="退款金额" prop="prePrice">
          <el-input v-model="appendForm.prePrice" @input="inputPrice" placeholder="请输入退款金额" />
        </el-form-item>
        <el-form-item label="退款方式" prop="phone">
          <el-select v-model="appendForm.type" placeholder="请选择" style="width:100%">
            <el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitBack">提交</el-button>
      </div>
    </el-dialog>
    <!-- 宠物详情弹窗 -->
    <el-dialog title="宠物详情" :visible.sync="petDialog" width="1000px" append-to-body class="center">
      <el-table v-loading="loading" :data="fosList">
        <el-table-column label="宠物名称" align="center" prop="name" />
        <el-table-column label="品种" align="center" prop="varNo" />
        <el-table-column label="性别" align="center" prop="sex">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? '弟弟' : '妹妹' }}
          </template>
        </el-table-column>
        <el-table-column label="肩高/体长" align="center" prop="high" />
        <el-table-column label="体重" align="center" prop="weight" />
        <el-table-column label="绝育情况" align="center" prop="isSter">
          <template slot-scope="scope">
            {{ scope.row.isSter == 1 ? '已绝育' : '未绝育' }}
          </template>
        </el-table-column>
      </el-table>
      <pagination style="position: relative;top:-20px;" :total="petTotal" :page.sync="query.pageNum"
        :limit.sync="query.pageSize" @pagination="getPetList" />
    </el-dialog>
    <!-- 客户到店确认弹窗 -->
    <el-dialog title="客户到店确认" :visible.sync="storeDialog" width="500px" append-to-body class="center">
      <el-form ref="form" :model="storeForm" :rules="rules" label-width="120px" class="input">
        <el-form-item label="寄养开始时间" prop="name">
          <el-date-picker v-model="storeForm.beginDate" style="width: 100%;" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitStore">提交</el-button>
      </div>
    </el-dialog>
    <!-- 结束寄养确认弹窗 -->
    <el-dialog title="结束寄养确认" :visible.sync="stopDialog" width="500px" append-to-body class="center">
      <el-form ref="form" :model="stopForm" :rules="rules" label-width="120px" class="input">
        <el-form-item label="开始时间" prop="name">
          <el-date-picker v-model="stopForm.beginDate" style="width: 100%;" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="name">
          <el-date-picker v-model="stopForm.endDate" style="width: 100%;" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <div style="font-size: 14px;
    color: #606266;margin-left: 50px;font-weight: bold;">寄养天数 {{ Math.ceil((new Date(stopForm.endDate).getTime() - new
      Date(stopForm.beginDate).getTime()) / (3600 * 24 * 1000)) + 1 || '' }} 天</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn" style="padding:12px 70px" @click="submitStop">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVipInfo, getVipInfo, delVipInfo, addVipInfo, updateVipInfo } from "@/api/pet/vipInfo";
import { listFoster, getPetList, toStore, stopFoster, resetFoster, setOrder, addPrePrice, delFoster, refPrePrice } from "../../../api/pet/foster";
import { getMap } from "@/api/pet/cashier";
import setting from './../setting/index'
export default {
  name: "VipInfo",
  components: { setting },
  data() {
    return {
      tab: 'order',
      tabList: [
        {
          name: '订单管理',
          value: 'order'
        },
        // {
        //   name: '寄养配置',
        //   value: 'setting'
        // },
      ],
      typeList: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '待到店',
          value: 0,
        },
        {
          label: '寄养中',
          value: 1,
        },
        {
          label: '待结账',
          value: 2,
        },
        {
          label: '已完成',
          value: 3,
        },
        {
          label: '已取消',
          value: 4,
        }
      ],
      status: '',
      payTypeList: [
        {
          label: '现金',
          value: 'xj',
        },
        {
          label: '支付宝',
          value: 'zfb',
        },
        {
          label: '微信',
          value: 'wx',
        },
        {
          label: 'pos机',
          value: 'pos',
        },
        {
          label: '其他',
          value: 'qt',
        },
      ],
      timeTypeList: [
        {
          label: '入店时间',
          value: 0
        },
        {
          label: '离店时间',
          value: 1
        },
        {
          label: '创建时间',
          value: 2
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      limitList: [
        {
          label: '未逾期',
          value: 0
        },
        {
          label: '已逾期',
          value: 1
        },
      ],
      storeList: [],//店铺下拉
      cardList: [],//会员卡下拉
      numList: [],//次卡下拉
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会员信息表格数据
      orderData: [],
      // 是否显示弹出层
      appendMoney: false,
      backMoney: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        time: [],
        vipName: null,
        params: {
          beginTime: null,
          endTime: null
        }
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      petDialog: false,
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      petTotal: 0,
      fosList: [],
      storeDialog: false,
      storeForm: {
        beginDate: ''
      },
      stopDialog: false,
      stopForm: {
        beginDate: '',
        endDate: ''
      },
      cashierList: [],
      appendForm: {},
      prePrice: 0
    };
  },
  created() {
    this.getList();
    getMap().then(res => {
      if (res.code == 200) {
        this.cashierList = res.data
      }
    })
  },
  methods: {
    /** 查询会员信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.status = this.status
      listFoster(this.queryParams).then(response => {
        this.orderData = response.rows;
        this.total = response.total;
        this.typeList.forEach(item => {
          item.num = ''
        })
        if (this.status === '') {
          this.typeList[0].num = response.total
        } else {
          this.typeList[this.status + 1].num = response.total
        }
        this.loading = false;
      });
    },
    //今日到店
    toStoreNow() {
      this.queryParams.type = 0
      this.handleQuery()
    },
    //今日离店
    toLeaveNow() {
      this.queryParams.type = 1
      this.handleQuery()
    },
    showPetDialog(no) {
      this.petDialog = true
      this.query.no = no
      this.getPetList()
    },
    getPetList() {
      this.loading = true;
      getPetList(this.query.no, this.query).then(res => {
        this.fosList = res.rows
        this.petTotal = res.total
        this.loading = false;
      })
    },
    changeType(index) {
      this.status = index
      this.getList()
    },
    toVipCard(id, no, cardId, type) {
      this.$router.push({ path: '/vip/addCard', query: { id, no, type, cardId } })
    },
    inputPrice(e) {
      this.appendForm.prePrice = e.replace(/[^0-9.]/g, "")
    },
    //追加预存款
    append(row) {
      this.appendForm = { id: row.id, vipNo: row.vipNo }
      this.appendMoney = true
    },
    //提交追加预存款
    submitAppend() {
      addPrePrice(this.appendForm).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess("追加预存款成功");
          this.appendMoney = false
          this.getList()
        }
      })
    },
    //退回预存款
    submitBack() {
      if (this.prePrice < this.appendForm.prePrice) {
        this.$message({
          message: '超出预存金额，请重新修改',
          type: 'warning'
        });
      } else {
        refPrePrice(this.appendForm).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("退还预存款成功");
            this.backMoney = false
            this.getList()
          }
        })
      }
    },
    //退还预存款
    back(row) {
      this.appendForm = { id: row.id, vipNo: row.vipNo, prePrice: row.prePrice }
      this.prePrice = row.prePrice
      this.backMoney = true
    },
    //到店
    toStore(row) {
      this.storeForm.id = row.id
      this.storeForm.status = row.status
      this.storeForm.beginDate = row.beginDate
      this.storeDialog = true
    },
    //结束寄养
    stopFoster(row) {
      this.stopForm.id = row.id
      this.stopForm.status = row.status
      this.stopForm.beginDate = row.beginDate || ''
      this.stopForm.endDate = row.endDate || ''
      this.stopDialog = true
    },
    //提交结束寄养
    submitStop() {
      stopFoster(this.stopForm).then(res => {
        this.$modal.msgSuccess("结束寄养成功");
        this.stopDialog = false
        this.getList()
      })
    },
    //修改
    eidtFoster(row) {
      this.$router.push({ path: '/business/addFoster', query: { id: row.id } })
    },
    //取消寄养
    resetpet(row) {
      resetFoster({ id: row.id }).then(res => {
        this.$modal.msgSuccess("取消寄养成功");
        this.getList()
      })
    },
    //去结算
    toPay(row) {
      setOrder({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$router.push({ path: '/business/cashier', query: { vipNo: row.vipNo } })
        }
      })
    },
    //新增寄养
    addFoster() {
      this.$router.push({ path: '/business/addFoster' })
    },
    // tab切换
    changeTab(value) {
      this.tab = value
    },
    // 取消按钮
    cancel() {
      this.appendMoney = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        no: null,
        name: null,
        country: null,
        phone: null,
        sex: null,
        date: null,
        address: null,
        remark: null,
        updateUser: null,
        updateTime: null,
        createUser: null,
        createTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.params.beginTime = this.queryParams.time?this.queryParams.time[0]: null
      this.queryParams.params.endTime = this.queryParams.time?this.queryParams.time[1]:null
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.appendMoney = true;
      this.title = "新增会员";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getVipInfo(id).then(response => {
        this.form = response.data;
        this.appendMoney = true;
        this.title = "编辑会员";
      });
    },
    submitStore() {
      toStore(this.storeForm).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess("确认到店成功");
          this.storeDialog = false
          this.getList()
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateVipInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.appendMoney = false;
              this.getList();
            });
          } else {
            addVipInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.appendMoney = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除寄养信息编号为"' + ids + '"的数据项？').then(function () {
        return delFoster(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('pet/vipInfo/export', {
        ...this.queryParams
      }, `vipInfo_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  .type-list {
    width: 600px;
    height: 46px;
    background: #ddd;
    border-radius: 20px;
    flex-wrap: nowrap;
    line-height: 40px;
    color: #333336;
    cursor: pointer;
    margin: 0 0 20px;
    padding: 0 3px;
    box-sizing: border-box;

    .item {
      width: 16.66%;
      text-align: center;
      height: 44px;
      font-size: 14px;
      font-family: PingFang;
      font-weight: 400;
      text-align: center;
      line-height: 44px;

      .el-badge {
        line-height: 40px;
      }
    }

    .item.active {
      min-width: 50px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      box-sizing: border-box;
      color: #fff;
      padding: 0 16px;
      background: #26272d;
      box-shadow: 0 0 9px 0 rgba(0, 0, 0, .1);
      border-radius: 20px;
    }
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>